.container .blockElement {
    @media screen and (max-width: 640px) {
        &.videoContainer{
            display: block;
        }

        .video{
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;

            iframe, object, embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    .blockContent {
        margin-left: 40px;

        @media screen and (max-width: 776px) {
            margin-left: 0;
        }

        >h2 {
            font-size: 24px;
            color: $black;
        }

        p {
            margin-bottom: 20px;
        }
    }

    &.alignCenter .blockContent {
        margin-left: 0;

        >h2,
        >div {
            text-align: center;
        }
    }

    &.imageAlignRight .blockContent {
        margin-left: 0;

        p {
            text-align: left;
        }
    }
}

#applitools {
    .blockContent img {
        width: 93%;
    }

    .imageAlignSide .blockImage {
        flex: 0 1 700px;
        max-width: 700px;
    }
}

#reactSupport {
    .imageAlignSide .blockImage {
        flex: 0 1 800px;
        max-width: 800px;
    }

    .frameworkLogos {
        height: 70px;
        padding: 0 10px 0 0;
    }

    padding: 40px 0 40px;
}

@media screen and (max-width: 1500px) {
    #applitools .imageAlignSide .blockImage {
        flex: 0 1 600px;
        max-width: 600px;
    }

    #reactSupport .imageAlignSide .blockImage {
        flex: 0 1 600px;
        max-width: 600px;
    }
}

img.install {
    width: 300px;
    margin-top: 15px;
    display: block;
}

.docMainWrapper {
    background: $white;

    .post article p {
        margin: 10px 0;
    }
}

#companyUsage {
    padding: 20px 0;

    img {
        width: 100px;
    }

    h3 {
        text-align: center;
        font-weight: bold;
    }

    .wrapper {
        max-width: 1100px;
    }

    div {
        overflow: hidden;

        ul {
            display: flex;
            justify-content: space-around;
            width: 3200px;
            margin: 0;
            transition: transform 1000ms ease;

            li {
                display: flex;
                min-width: 150px;
                justify-content: center;
                align-items: center;

                img {
                    filter: grayscale(100%);
                    transition: filter 200ms;
                }

                a:hover img {
                    filter: grayscale(0%);
                }
            }
        }
    }

    .logoNavigation {
        text-align: center;

        button {
            &:focus {
                outline: none;
            }

            &:before {
                content: "\2022";
                color: black;
                font-size: 25px;
                opacity: .25;
            }

            &.active::before {
                opacity: 1;
            }

            transition: opacity 200ms ease;
            color: transparent;
            border: 0;
            background: 0;
            cursor: pointer;
            padding: 10px 10px 0 10px;
            width: 30px;
            line-height: 10px;
            margin: 0 5px;
        }
    }
}

.imageAlignLeft .blockContent {
    h2, p {
        text-align: left;
    }
}

.lightBackground {
    background: #fAfAfA;
}

.tabs {
    margin-top: 20px;

    .nav-link {
        padding: 8px 16px;
    }

    .nav-tabs {
        border-bottom-width: 2px;
    }

    .tab-content code {
        margin-top: 0;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}

.learnmore {
    text-align: center;

    a {
        margin: 30px 20px;

        &:last-child {
            background-color: $orange;
            color: $white;
        }
    }
}
